<%--
  Created by IntelliJ IDEA.
  User: 聂姜磊
  Date: 2018-08-08
  Time: 14:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>费翔设置</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/sweetalert/sweetalert.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/sweetalert/sweetalert.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css"/>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/table/bootstrap-table.min.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/table/locale/bootstrap-table-zh-CN.min.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript">
        //切换
        $('#myTabs a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
        $('#myTabs a[href="#profile"]').tab('show') // Select tab by name
        $('#myTabs a:first').tab('show') // Select first tab
        $('#myTabs a:last').tab('show') // Select last tab
        $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
            var element = layui.element;
            //…
        });

    </script>
</head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">费项设置</li>

    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">

            <script type="text/javascript">
                $(function(){
                    $("#san").bootstrapTable({
                        url: '${pageContext.request.contextPath}/costitem/sj',
                        contentType : "application/x-www-form-urlencoded",
                        queryParamsType:'',
                        height:450,
                        pageList:[4,2,15],
                        pageNumber:1,
                        pageSize:5,
                        pagination:true,
                        sidePagination:'server',
                        onDblClickRow: function (row, $element, field) {
                            $("#myM").modal("show");
                            $("#hid").val(row.id);
                            $("#xgfxmc").val(row.name);
                            $("#xgsfff").val(row.type);
                            $("#xgdwjg").val(row.money);
                            $("#xgsfzq").val(row.zouqi);
                        },
                        columns: [
                            {
                                field: 'id',
                                title: 'id',
                                visible : false,
                            },{
                                field: 'id',
                                title: '费项编号'
                            },{
                                field: 'name',
                                title: '费项名称'
                            },{
                                field: 'type',
                                title: '收费方式'
                            },{
                                field: 'money',
                                title: '单位价格'
                            },{
                                field: 'zouqi',
                                title: '收费周期(月)'
                            }, {
                                field: '删除', title: '操作', formatter: function (value, row, index) {
                                    return "<a onclick='del(" + row.id + ")' class='glyphicon glyphicon-trash'></a>"
                                },
                                cellStyle:{
                                    css:{"width":"15%"}
                                }
                            }
                        ],
                    })
                })


                /* 删除*/
                function del(aid) {
                    if(confirm("您确定要删除这条通告信息吗？")){

                        $.post("${pageContext.request.contextPath}/costitem/del", {
                            "id" : aid
                        },function (data) {

                            $("#san").bootstrapTable("load",data);

                        })
                        alert("删除成功")
                    }else {
                        alert("你取消的删除！")
                    }

                }
                /* 添加*/
                function tianjia(){
                    var fxmc =$("#fxmc").val();
                    var sfff =$("#sfff").val();
                    var dwjg =$("#dwjg").val();
                    var sfzq =$("#sfzq").val();
                    //半闭对话框
                    $("#myModal").modal("hide") ;
                    $.post("${pageContext.request.contextPath}/costitem/add",{"name":fxmc,"type":sfff,"money":dwjg,"zouqi":sfzq},function(data){
                        $("#san").bootstrapTable("load",data);
                        if(data){
                            swal("成功！", "你的数据已成功提交！",
                                "success");
                        }else{
                            swal("失败！", "数据提交失败！",
                                "error");
                        }
                    });
                }
                /*修改*/
                function xg(){
                    //接收数据

                    var hid= $("#hid").val();
                    var xgfxmc =$("#xgfxmc").val();
                    var xgsfff =$("#xgsfff").val();
                    var xgdwjg =$("#xgdwjg").val();
                    var xgsfzq =$("#xgsfzq").val();
                    //alert(name+ "--" + address + "--" + email)  ;
                    //半闭对话框
                    $("#myM").modal("hide") ;
                    //
                    $.post("${pageContext.request.contextPath}/costitem/upd",{"id":hid,"name":xgfxmc,"type":xgsfff,"money":xgdwjg,"zouqi":xgsfzq},function(data){
                        $("#san").bootstrapTable("load",data)
                        if(data){
                            swal("成功！", "你的数据已成功提交！",
                                "success");
                        }else{
                            swal("失败！", "数据提交失败！",
                                "error");
                        }
                    }) ;
                }
            </script>

            <%-- 添加按钮--%>
            <div class="layui-btn-group" style="padding-left: 10px;padding-bottom: 20px; ">
                <button type="button" class="layui-btn" data-toggle="modal" data-target="#myModal">增加</button>
            </div>


            <!-- 添加模态框 -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">物业费信息</h4>
                        </div>
                        <div class="modal-body">
                            <!-- form开始 -->
                            <form>
                                <div class="form-group">
                                    <label for=>费项名称:</label> <input type="text" class="form-control" id="fxmc" placeholder="请输入费项名称">
                                </div>
                                <div class="form-group">
                                    <label for=>收费方式:</label> <input type="text" class="form-control" id="sfff" placeholder="请输入收费方式">
                                </div>
                                <div class="form-group">
                                    <label for=>单位价格:</label> <input type="text" class="form-control" id="dwjg" placeholder="请输入单位价格">
                                </div>
                                <div class="form-group">
                                    <label for=>收费周期:</label> <input type="text" class="form-control" id="sfzq" placeholder="请输入收费周期">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button onclick="tianjia()" type="button" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 修改模态框 -->
            <div class="modal fade" id="myM">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel22">修改小区信息</h4>
                        </div>
                        <div class="modal-body">
                            <!-- form开始 -->
                            <form>
                                <input type="hidden" class="form-control" id="hid" name="hid" >
                                <div class="form-group">
                                    <label for=>费项名称:</label> <input type="text" class="form-control" id="xgfxmc" name="xgfxmc">
                                </div>
                                <div class="form-group">
                                    <label for=>收费方式:</label> <input type="text" class="form-control" id="xgsfff" name="xgsfff" >
                                </div>
                                <div class="form-group">
                                    <label for=>单位价格:</label> <input type="text" class="form-control" id="xgdwjg"  name="xgdwjg" >
                                </div>
                                <div class="form-group">
                                    <label for=>收费周期:</label> <input type="text" class="form-control" id="xgsfzq" name="xgsfzq">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button onclick="xg()" type="button" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            <table id="san"></table>
        </div>
    </div>
</div>

</body>
</html>
